<template>
  <view class="container">
    <view class="top flex">
      <view class="search-box flex">
        <image src="/static/common/search-icon.png" mode=""></image>
        <input v-model="search" type="text" placeholder="请输入订单号或商品标题" />
        <text @click="doSearch">搜索</text>
      </view>
      <view @click="filterClick" class="filter-box flex">
        <image src="/static/common/filter-icon-red.png" mode=""></image>
        <text>筛选</text>
      </view>
    </view>
    <view class="tabs-box flex">
      <view
        @click="tabClick(item, index)"
        :class="{ active: currentIndex == index }"
        v-for="(item, index) in tabs"
        :key="index">
        {{ item.text }}
      </view>
    </view>
    <view class="list">
      <z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
        <template #empty>
          <view class="empty-box">
            <image src="/static/common/empty-data.png" mode=""></image>
            <view class="empty">暂无订单</view>
            <view @click="goBack" class="empty-btn">返回上级</view>
          </view>
        </template>
        <view @click="goDetail(item)" v-for="(item, index) in list" :key="index" class="product-box">
          <view class="flex product-top">
            <view class="flex">
              <view class="tag">{{ item.platformName }}</view>
              <view class="time">{{ item.orderCreateTime }}</view>
            </view>
            <view :class="{ orange: item.orderStatus == 11, green: item.orderStatus == 12 }" class="status">
              {{ item.orderStatusName }}
            </view>
          </view>
          <view class="product flex">
            <view class="product-img">
              <image :src="item.itemImg" mode=""></image>
              <image v-if="item.orderStatus == 13" class="ban" src="/static/my/product-ban.png" mode=""></image>
            </view>
            <view class="product-info">
              <view class="name">{{ item.itemTitle }}</view>
              <view class="number flex">
                <text>订单号 {{ item.parentOrderId }}</text>
                <image @click="copy(item.parentOrderId)" src="/static/common/copy-icon.png" mode=""></image>
              </view>
              <view class="price-box flex">
                <view class="price">
                  <text>¥</text>
                  <text>{{ item.payPrice }}</text>
                </view>
                <view class="discount flex">
                  <view class="money">
                    <text>¥</text>
                    <text>{{ item.totalCommission }}</text>
                  </view>
                  <view class="discount-name">返利</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
  <u-popup v-model="show" mode="top" border-radius="24" mask-close-able>
    <view class="popup-title">类型</view>
    <view class="popup-list">
      <view
        @click="orderTypeClick(item)"
        v-for="item in orderTypeArr"
        :key="item.value"
        :class="{ active: temporaryFilterData.orderType == item.value }">
        {{ item.title }}
      </view>
    </view>
    <view class="popup-title">平台</view>
    <view class="popup-list">
      <view
        @click="platformClick(item)"
        v-for="item in platformArr"
        :key="item.type"
        :class="{ active: temporaryFilterData.platform == item.value }">
        {{ item.title }}
      </view>
    </view>
    <view class="popup-title">选择时间</view>
    <view class="popup-datebox flex">
      <view @click="dateBoxClick('orderStartTime')" class="date-box">
        <block v-if="temporaryFilterData.orderStartTime">{{ temporaryFilterData.orderStartTime }}</block>
        <text v-else>开始时间</text>
      </view>
      <text>-</text>
      <view @click="dateBoxClick('orderEndTime')" class="date-box">
        <block v-if="temporaryFilterData.orderEndTime">{{ temporaryFilterData.orderEndTime }}</block>
        <text v-else>结束时间</text>
      </view>
    </view>
    <date-pickers @change="datePickerChange"></date-pickers>
    <view class="popup-btn flex">
      <view @click="rest">重置</view>
      <view @click="confirm">确定</view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from 'vue';
import DatePickers from '@/components/date-picker/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getOrderList, getOrderType } from '@/api/order.js';

onLoad((options) => {
  console.log('tabIndex', options.tabIndex);
  if (options.tabIndex) {
    currentIndex.value = Number(options.tabIndex);
    query.value.orderStatus = tabs.value[options.tabIndex].orderStatus;
    // paging.value.reload();
  }
  // 获取平台
  getOrderType().then((res) => {
    const [orderType, platform] = res.data;
    platformArr.value = platform.items;
    orderTypeArr.value = orderType.items;
    temporaryFilterData.value.platform = platform.items[0].value;
    temporaryFilterData.value.orderType = orderType.items[0].value;
  });
});

const search = ref(''); // 搜索
// 临时筛选数据 赋值时使用
const temporaryFilterData = ref({
  platform: '',
  orderType: '',
  orderStartTime: '',
  orderEndTime: '',
});

// 搜索
const doSearch = () => {
  console.log('搜索', search.value);
  if (search.value) {
    query.value.keyword = search.value;
    paging.value.reload();
  }
};

const currentIndex = ref(0);
const tabs = ref([
  { text: '全部', orderStatus: '' },
  { text: '已付款', orderStatus: 12 },
  { text: '已收货', orderStatus: 14 },
  { text: '已结算', orderStatus: 3 },
  { text: '已失效', orderStatus: 13 },
]);
const query = ref({
  pageNum: 1,
  pageSize: 10,
  orderStatus: '',
  orderStatus: '',
  platform: '',
  orderType: '',
  keyword: '',
  orderStartTime: '',
  orderEndTime: '',
});
const tabClick = (item, index) => {
  console.log(item, index);
  if (currentIndex == index) return;
  currentIndex.value = index;
  query.value.orderStatus = item.orderStatus;
  paging.value.reload();
};
const paging = ref(null);
const list = ref([]);
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize);
  const res = await _getOrderList();
  paging.value.completeByTotal(res.data.rows, res.data.total);
};
// 获取订单列表
const _getOrderList = async () => await getOrderList(query.value);

const show = ref(false);
const platformArr = ref([]); // 平台
const orderTypeArr = ref([]); // 类型
const filterClick = () => {
  show.value = true;
};
const orderTypeClick = (item) => {
  if (item.value == temporaryFilterData.value.orderType) return;
  temporaryFilterData.value.orderType = item.value;
};
const platformClick = (item) => {
  if (item.value == temporaryFilterData.value.platform) return;
  temporaryFilterData.value.platform = item.value;
};
const currentDateBox = ref('orderStartTime');
const dateBoxClick = (key) => {
  if (currentDateBox.value == key) return;
  currentDateBox.value = key;
};
const datePickerChange = (val) => {
  temporaryFilterData.value[currentDateBox.value] = val;
};
const rest = () => {
  temporaryFilterData.value = {
    platform: platformArr.value[0].value,
    orderType: orderTypeArr.value[0].value,
    orderStartTime: '',
    orderEndTime: '',
  };
};
const confirm = () => {
  query.value = {
    ...query.value,
    ...temporaryFilterData.value,
  };
  paging.value.reload();
  show.value = false;
};

const goDetail = (item) => {
  if (!item.jumpDetail) return;
  uni.navigateTo({
    url: `/subPages/goodsDetail/index?goodsId=${item.id}&platform=${item.platform}`,
  });
};

const goBack = () => {
  uni.navigateBack();
};

const copy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
        duration: 2000,
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.popup-btn {
  width: 750upx;
  height: 120upx;
  line-height: 120upx;
  justify-content: space-between;
  margin: 24upx 0;
  padding: 0 40upx;
}

.popup-btn > view {
  font-size: 32upx;
  font-weight: 400;
  border-radius: 64upx;
  width: 320upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
  text-align: center;
}

.popup-btn > view:nth-child(1) {
  background-color: #ededed;
  color: #333;
}

.popup-btn > view:nth-child(2) {
  background-color: #ff0309;
  color: #ffffff;
}
.popup-title {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-left: 40upx;
  margin-top: 24upx;
}
.popup-list {
  padding: 0 40upx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20upx;
  view {
    width: 152upx;
    height: 60upx;
    border-radius: 40upx;
    text-align: center;
    line-height: 56upx;
    border: 1px solid #f0f0f0;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    margin-top: 24upx;
    &.active {
      border: 1px solid #ff0309;
      color: #ff0309;
    }
  }
}
.popup-datebox {
  padding: 0 40upx;
  justify-content: space-between;
  margin-top: 24upx;
  .date-box {
    width: 300upx;
    height: 80upx;
    border-radius: 56upx;
    background-color: #f9f9f9;
    line-height: 80upx;
    padding: 0 32upx;
    font-weight: 400;
    font-size: 12px;
    color: #333;
    text {
      color: #999;
    }
  }
  > text {
    color: #333;
    font-weight: bolder;
    font-size: 50upx;
  }
}
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  .top {
    padding: 0 20px 0 12px;
    background-color: #fff;
    justify-content: space-between;
    height: 64px;
    position: sticky;
    top: 0;
    .search-box {
      flex: 1;
      height: 40px;
      border-radius: 38px;
      background: #f9f9f9;
      padding: 0 22px 0 12px;
      image {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
      input {
        flex: 1;
        font-size: 14px;
        color: #999;
        font-weight: 400;
      }
      text {
        font-weight: 400;
        font-size: 14px;
        color: #ff0c1b;
        margin-left: 30px;
        line-height: 1;
        position: relative;
        &::after {
          content: '|';
          color: #d9d9d9;
          position: absolute;
          left: -20px;
          top: 0px;
        }
      }
    }
    .filter-box {
      flex-direction: column;
      justify-content: center;
      margin-left: 12px;
      image {
        width: 16px;
        height: 16px;
        margin-bottom: 1px;
      }
      text {
        font-size: 10px;
        color: #ff0c1b;
        font-weight: 400;
      }
    }
  }
  .tabs-box {
    background-color: #f8f8f8;
    height: 60px;
    padding: 12px 12px 0;
    position: sticky;
    top: 64px;
    justify-content: space-between;
    view {
      width: 25%;
      height: 100%;
      text-align: center;
      line-height: 48px;
      color: #333;
      font-weight: 400;
      font-size: 14px;
      &.active {
        font-size: 16px;
        font-weight: 500;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 4px;
          background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
          border-radius: 34px;
        }
      }
    }
  }
  .list {
    padding: 0px 12px 12px;
    height: calc(100vh - 124px);
    .empty-box {
      text-align: center;
      margin-top: -150px;
      image {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
      }
      .empty {
        color: #333;
        font-weight: 500;
        font-size: 14px;
      }
      .empty-btn {
        width: 150px;
        height: 50px;
        border-radius: 34px;
        text-align: center;
        line-height: 46px;
        border: 1px solid #ff0309;
        font-weight: 500;
        font-size: 16px;
        color: #ff0309;
        margin-top: 32px;
      }
    }
    .product-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 0 12px;
      margin-top: 12px;
      .product-top {
        height: 40px;
        justify-content: space-between;
        border-bottom: 0.5px solid #9999994d;
        .tag {
          background: linear-gradient(101.54deg, #ff0309 -3.19%, #ff6a2a 96.1%);
          border-radius: 3px;
          height: 12px;
          line-height: 11px;
          padding: 0 5px;
          color: #fff;
          font-weight: 400;
          font-size: 8px;
          margin-right: 12px;
        }
        .time {
          color: #999;
          font-weight: 400;
          font-size: 12px;
        }
        .status {
          font-weight: 400;
          font-size: 12px;
          color: #999;
          &.orange {
            color: #ff6c2a;
          }
          &.green {
            color: #00c678;
          }
        }
      }
      .product {
        padding: 12px 0;
        .product-img {
          width: 80px;
          height: 80px;
          border-radius: 16px;
          margin-right: 10px;
          overflow: hidden;
          position: relative;
          image {
            width: 100%;
            height: 100%;
            &.ban {
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        .product-info {
          width: calc(100% - 90px);
          flex: 1;
          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
            color: #333;
            font-size: 14px;
          }
          .number {
            margin: 8px 0 14px;
            text {
              font-weight: 400;
              font-size: 12px;
              color: #999999;
            }
            image {
              width: 12px;
              height: 12px;
              margin-left: 6px;
            }
          }
          .price-box {
            justify-content: space-between;
            .price {
              text {
                color: #ff0309;
                font-weight: 400;
                font-size: 12px;
                &:last-child {
                  font-size: 14px;
                  font-weight: 600;
                }
              }
            }
            .discount {
              height: 26px;
              background-image: url(~@/static/my/discount-bg.png);
              background-repeat: no-repeat;
              background-size: 64px 100%;
              background-position: top right;
              .money {
                background-image: url(~@/static/my/discount-bg-money.png);
                background-repeat: no-repeat;
                background-size: auto 100%;
                height: 22px;
                line-height: 20px;
                padding-left: 12rpx;
                padding-right: 12px;
                margin-right: -22rpx;
                text {
                  color: #ff0309;
                  font-weight: 400;
                  font-size: 10px;
                  &:last-child {
                    font-size: 12px;
                    font-weight: 600;
                  }
                }
              }
              .discount-name {
                height: 100%;
                padding-left: 2px;
                width: 68rpx;
                line-height: 26px;
                background-image: url(~@/static/my/discount-bg-tag.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                text-align: center;
                color: #fff;
                font-weight: 500;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>